<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>2019年真题演练</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/muse-ui@3.0.2/dist/muse-ui.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/muse-ui@3.0.2/dist/muse-ui.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/google/material-design-icons@3.0.1/iconfont/material-icons.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
        <style>
            html, body {
                height: 100%; 
            }
            h2 {
                margin: 6px 0;
            }
            h4 {
                margin: 6px 0;
            }
            .context {
                padding: 20px;
            }
            .sub2 {
                float: left;
            }
            .sub3 {
                float: right;
            }
            .question {
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .mu-item-action {
                text-align: center;
                min-width: 24px!important;
            }
            .footer {
                right: 0;
                position: fixed;
                bottom: 0px; 
            }
            .mu-item.has-avatar {
                 height: inherit!important;
            }
            .mu-list {
                padding: 0;
            }
            .mu-item {
                padding: 16px 0;
            }
            .rightAnswer {
                color: #2f5cff;
            }
            .leftAnswer {
                color: #ea0000;
            }
            .greenAnswer {
                color: #03b800;
            }
            .button-wrapper {
              /*text-align: center;*/
            }
            .button-wrapper .mu-button{
                margin: 8px;
                vertical-align: middle;
            }
            .button-wrapper a.mu-button {
                text-decoration: none;
            }
            .qnormal {
                background: #fff;
                color: #000;
            }
            .qnormal-red {
                color: #fff;
                background: rgb(244, 54, 54);
            }
            .qnormal-this {
                color: #fff;
                background: #2196f3;
            }
            .mu-fab-button {
                -webkit-box-shadow: 0 2px 3px -1px rgba(0,0,0,.2), 0 2px 3px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
                box-shadow: 0 2px 2px -1px rgba(0,0,0,.2), 0 2px 3px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
            }
            .chapter {
                margin-bottom: 60px;
            }
            .mu-dialog-fullscreen {
                overflow: auto;
            }
            .logo {
                position: absolute;
                bottom: 30px;
                right: 10px;
            }
            .logo img {
                opacity: 0.6;
                max-height: 180px;
                max-width: 180px;
            }
        </style>
    </head>
    
    <body>
        <div class="logo">
            <img src="logo.png"/>
        </div>
        <div id="app">
            <mu-appbar style="width: 100%;" title="2019年真题演练">
                <mu-button icon slot="left" href="index.html">
                    <mu-icon value="arrow_back"></mu-icon>
                </mu-button>
                <mu-button icon slot="right" @click="openFullscreen=true">
                    <mu-icon value="menu"></mu-icon>
                </mu-button>
            </mu-appbar>
            <mu-container class="context" v-if="isLoad">
                <div class="header">
                    <div class="sub1"><h2>{{all.t}}</h2></div>
                    <div class="sub2"><h4>{{all.d[unitId].t}}</h4></div>
                    <div class="sub3">
                        <h4>
                            <span>{{questionId + 1}}</span>
                            <span>/</span>
                            <span>{{all.d[unitId].d.length}}</span>
                        </h4>
                    </div>
                </div>
                <div style="clear:both;"></div>
                <mu-divider></mu-divider>
                <div class="question">{{all.d[unitId].d[questionId].q}}</div>
                <mu-divider></mu-divider>
                <div class="select">
                    <mu-list v-for="(option, index) in all.d[unitId].d[questionId].g" :key="index">
                        <mu-list-item avatar button @click="sClick(index,all.d[unitId].d[questionId].a)">
                          <!--<mu-list-item-action>A</mu-list-item-action>-->
                          <mu-list-item-content :class="{rightAnswer: showAnwser && index == all.d[unitId].d[questionId].a, 
                              leftAnswer: showLeft && index == leftIndex, greenAnswer: showRight && index == rightIndex}">{{option}}</mu-list-item-content>
                        </mu-list-item>
                    </mu-list>

                </div>
            </mu-container>

            <div class="footer">
                <mu-row gutter>
                    <mu-col span="3">
                        <mu-button flat @click="qUp">上一题</mu-button>
                    </mu-col>
                    <mu-col span="3">
                        <mu-button flat>{{showTime(times)}}</mu-button>
                    </mu-col>
                    <mu-col span="3">
                        <mu-button flat @click="sAnwser">{{showAnwser? '隐藏': '答案'}}</mu-button>
                    </mu-col>
                    <mu-col span="3">
                        <mu-button flat @click="qDown">下一题</mu-button>
                    </mu-col>
                </mu-row>
            </div>
            
            
            <mu-dialog ref="container" width="360" transition="slide-bottom" fullscreen :open.sync="openFullscreen">
                <mu-appbar color="primary" title="题库目录">
                    
                    <mu-button slot="right" flat @click="openAlert=true">重置错题</mu-button>
                    <mu-button slot="right" icon @click="openFullscreen=false">
                        <mu-icon value="close"></mu-icon>
                    </mu-button>
                </mu-appbar>
                <div style="padding: 14px;">
                    <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                        <mu-container class="chapter">
                            <h3>{{all.t}}</h3>
                            <div v-for="(unit, y) in all.d" :key="y">
                                <mu-sub-header>{{unit.t}}</mu-sub-header>
                                <mu-divider></mu-divider>
                                <mu-container class="button-wrapper">
                                    <mu-button fab small 
                                    :class="{'qnormal-red': checkLeft(defaultPage, y, z), qnormal: true, 'qnormal-this': (unitId == y && questionId == z)}" 
                                    v-for="(q, z) in unit.d" :key="z" @click="jumpQ(y, z)">{{z + 1}}</mu-button>
                                </mu-container>
                            </div>
                        </mu-container>
                    </mu-load-more>
                </div>
            </mu-dialog>
            <mu-dialog title="清空错题" :open.sync="openAlert">
                是否清空全部错题?
                <mu-button slot="actions" flat color="primary" @click="openAlert=false">取消</mu-button>
                <mu-button slot="actions" flat color="primary" @click="reset">确定</mu-button>
            </mu-dialog>
        </div>
        <script>
        var app = new Vue({
            el: '#app',
            data: {
                letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                times: 0,
                leftIndex: 0,
                rightIndex: 0,
                showAnwser: false,
                openFullscreen: false,
                openAlert: false,
                isLoad: false,
                all: {},
                refreshing: false,
                loading: false,
                loadFinishFirst: false,
                showLeft: false,
                showRight: false,

                defaultPage: 0,
                unitId: 0,
                questionId: 0
            },
            watch: {
                defaultPage: function (val){
                    this.save()
                },
                unitId: function (val){
                    this.save()
                },
                questionId: function (val){
                    this.save()
                }
            },
            created() {
                setInterval(function (){
                    app.times += 1
                }, 1000)
                this.loadQ()
                this.loadPage()
            },
            methods: {
                showTime: function (s){
                    var h;
                    h = Math.floor(s / 60);
                    s = s % 60;
                    h += '';
                    s += '';
                    h = (h.length == 1)? '0' + h : h;
                    s = (s.length == 1)? '0' + s : s;
                    return h + ':' + s;
                },
                sAnwser: function (){
                    this.showAnwser = !this.showAnwser
                },
                sClick: function (index, cindex){
                    if (index == cindex){
                        // this.$toast.success('回答正确')
                        // this.qDown()
                        this.showLeft = false
                        this.showRight = true
                        this.rightIndex = index
                    } else {
                        localStorage.setItem('t2_' + this.defaultPage + '_' + this.unitId + '_' + this.questionId, 1);
                        // this.$toast.error('回答错误')
                        this.showLeft = true
                        this.showRight = false
                        this.leftIndex = index
                    }
                    
                },
                checkLeft: function (d, u, q){
                    // 判断失败
                    return localStorage.getItem('t2_' + d + '_' + u + '_' + q) == true
                },
                loadPage: function (){
                    axios.get("q2/" + this.defaultPage + ".json").then(function (response) {
                        // console.log(response.data)
                        app.isLoad = true;
                        app.all = response.data
                        app.refreshing = false
                        app.loading = false
                        if (app.openFullscreen && app.defaultPage > 0){
                            app.$refs.container.$refs.dialog.scrollTop = 0
                        }
                        app.loadFinish()
                    }).catch(function (error) {
                        app.refreshing = false
                        alert("抱歉, 获取信息失败, 点击重试");
                        window.location.reload();
                    });
                },
                refresh: function () {
                    this.refreshing = true
                    this.$refs.container.$refs.dialog.scrollTop = 0
                    if (this.defaultPage > 0){
                        this.defaultPage -= 1
                        this.unitId = 0
                        this.questionId = 0
                        this.loadPage();
                    } else {
                        this.refreshing = false
                    }
                    
                },
                load: function () {
                    this.loading = true
                    if (this.defaultPage >= 3){
                        this.loading = false
                    } else {
                        this.defaultPage += 1
                        this.unitId = 0
                        this.questionId = 0
                        this.loadPage();
                    }
                },
                qUp: function (){
                    if (this.questionId > 0){
                        this.questionId -= 1
                        this.showLeft = false
                        this.showRight = false
                    } else {
                        this.qPrevUnit()
                    }
                },
                qDown: function (){
                    if (this.questionId < this.all.d[this.unitId].d.length - 1){
                        this.questionId += 1
                        this.showLeft = false
                        this.showRight = false
                    } else {
                        this.qNextUnit()
                    }
                },
                qNextUnit: function (){
                    // 下一单元
                    if (this.unitId < this.all.d.length - 1){
                        this.unitId += 1
                        this.questionId = 0
                    } else {
                        this.qNextCpt()
                    }
                },
                qPrevUnit: function (){
                    // 上一单元
                    if (this.unitId > 0){
                        this.unitId -= 1
                        this.questionId = this.all.d[this.unitId].d.length - 1
                    } else {
                        this.qPrevCpt()
                    }
                },
                qNextCpt: function (){
                    // 下一章
                    if (this.defaultPage < 3){
                        this.defaultPage += 1
                        this.unitId = 0
                        this.questionId = 0
                        this.loadPage();
                    } else {
                        alert('已经是最后一题了')
                    }
                },
                qPrevCpt: function (){
                    // 上一章
                    if (this.defaultPage > 0){
                        this.defaultPage -= 1
                        // this.unitId = 0
                        // this.questionId = 0
                        this.loadFinishFirst = true
                        this.loadPage();
                    } else {
                        alert('已经是第一题了')
                    }
                },
                loadFinish: function (){
                    // 加载完成
                    if (this.loadFinishFirst){
                        this.loadFinishFirst = false
                        this.unitId = this.all.d.length - 1
                        this.questionId = this.all.d[this.unitId].d.length - 1
                    }
                },
                jumpQ: function (unit, question){
                    // 跳转到某题
                    this.unitId = unit
                    this.questionId = question
                    this.openFullscreen = false
                    this.showLeft = false
                },
                reset: function (){
                    localStorage.clear()
                    this.openFullscreen = false
                    this.openAlert = false
                },
                save: function (){
                    // this.defaultPage + '_' + this.unitId + '_' + this.questionId
                    localStorage.setItem('t2_defaultPage', this.defaultPage);
                    localStorage.setItem('t2_unitId', this.unitId);
                    localStorage.setItem('t2_questionId', this.questionId);
                },
                loadQ: function (){
                    let d = localStorage.getItem('t2_defaultPage')
                    let u = localStorage.getItem('t2_unitId')
                    let q = localStorage.getItem('t2_questionId')
                    if (d != null && u != null && q != null){
                        this.defaultPage = parseInt(d)
                        this.unitId = parseInt(u)
                        this.questionId = parseInt(q)
                    }
                }
            }
        })
        </script>
    </body>

</html>